<template>
  <div>
    <page-main>
      <TableHeader title="借单列表（未归还）" />
      <el-table v-loading="isTableLoading" :data="dataList" border stripe highlight-current-row>
        <template v-for="item of columns">
          <el-table-column v-if="item.prop === 'equipList'" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width">
            <template slot-scope="scope">
              <span v-for="equip of scope.row.equipList" :key="equip.equipId">{{ `${equip.equipName}(${equip.count}个)、` }}</span>
            </template>
          </el-table-column>
          <el-table-column v-else :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width" />
        </template>
        <el-table-column fixed="right" label="操作" width="95">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick('return', scope.row)">立即归还</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Page :current-page="currentPage" :total="total" :page-size="pageSize" @change-current-page="changeCurrentPage" @change-page-size="changePageSize" />
    </page-main>
    <ReturnsDialog :data="form" :show="showDialog" :readonly="readonly" @closeDialog="closeDialog" @afterSubmit="onDialogSubmit" />
  </div>
</template>

<script>
import page from '@/mixins/page'
import dialog from '@/mixins/dialog'
import { borrow } from '@/api/borrow'
import ReturnsDialog from './components/returnsDialog.vue'

export default {
  components: { ReturnsDialog },
  mixins: [page, dialog],
  data() {
    return {
      columns: [
        {
          prop: 'id',
          label: '借单ID号',
          width: '80px'
        },
        {
          prop: 'equipList',
          label: '借用物品清单'
        },
        {
          prop: '_createTime',
          label: '借用时间',
          width: '160px'
        },
        {
          prop: '_expiryTime',
          label: '逾期时间',
          width: '160px'
        }
      ],
      dataList: [],
      searchParams: {},
      form: {},
      readonly: false,
      isTableLoading: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取table数据
    async getList() {
      const params = {
        current: this.currentPage,
        size: this.pageSize,
        sessionId: this.$store.state.user.session_id
      }
      this.isTableLoading = true
      const result = await borrow.listStatus(params)
      if (Array.isArray(result.data.borrows)) {
        this.dataList = result.data.borrows.map((item) => {
          return {
            ...item,
            _createTime: this.$dayjs.unix(item.createTime).format('YYYY-MM-DD HH:mm:ss'),
            _expiryTime: this.$dayjs.unix(item.expiryTime).format('YYYY-MM-DD HH:mm:ss')
          }
        })
      }

      this.total = result.data.total * 1
      this.isTableLoading = false
    },
    handleClick(action, data) {
      this.form = data
      if (action === 'return') {
        this.readonly = true
        this.openDialog()
      }
    },
    onAddNew() {
      this.readonly = false
      this.form = {}
      this.openDialog()
    },
    onDialogSubmit() {
      this.getList()
      this.closeDialog()
    }
  }
}
</script>
